<template>
  <div>
    <section class="todoapp">
      <AHeader @chuan='fn'> </AHeader>

      <ABody :list="list" @shan='shan' @shuang='shuang'></ABody>

      <AFooter :list="list" @clearQ='clearQ' :type='type' @fn1='fn1' ></AFooter>
    </section>
  </div>
</template>

<script>
import AHeader from '@/components/AHeader.vue'
import ABody from '@/components/ABody.vue'
import AFooter from '@/components/AFooter.vue'

export default {
  components: {
    AHeader,
    ABody,
    AFooter
  },
  data () {
    return {
      list: [
        { id: 1, name: '吃饭', isDone: true },
        { id: 2, name: '睡觉', isDone: false },
      ],
      type:'all'
    }
  },
  props:{
    
  },
    methods: {
      fn(name){
        this.list.unshift({ id: +new Date(), name: name, isDone: false})
      },
      shan(id){
        this.list= this.list.filter(item=>item.id!=id)
      },
      shuang(id){

        const res= this.list.find(item=>item.id===id);
        res.isDone=!res.isDone;

      },
      clearQ(){
        this.list=this.list.filter(item=> item.isDone===false)
      },
      
    },
    computed: {
      fn1(value){

        if(value==='all'){
         return  this.list
        }else if(value==='active'){
          return this.list.filter(item=>item.isDone!=item.isDone)
        }else if(value==='completed'){
          return  this.list.filter(item=>item.isDone=true)
      }
      }
    },
}

</script>

<style></style>
